Debugging CSS Part 1

intro

Engineering projects are big, complicated endeavors. Subsystems work together to create larger systems. Components and connections create subsystems. Understanding the system as a whole involves recognizing how the many layers fit together. This may sound daunting but there's good news:

Simple ideas form the basis of even the most complex system.

The layouts of real websites are no different - simple CSS properties combine to form complex layouts.

Being able to reason about, isolate and work with individual aspects of any large system is critical for your career as a developer. For this quiz, I want you to practice breaking down a complex problem by fixing this website. The HTML is below. Take a moment to read through the HTML and then predict the general layout of this site.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Relative Flow Quiz</title>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: bold;
      font-size: 14pt;
    }
    .bordered {
      border: 2px solid #2e3d49;
    }
    .parent {
      height: 100%;
      background-color: #dbe2e8;
      padding: 8px;
    }
    .light-olive {
      background-color: #DFDFD1;
    }
    .relative {
      position: relative;
      top: 50px;
    }
    .sibling {
      display: inline-block;
      background-color: #15C26B;
      width: 150px;
      height: 100px;
    }
    .child {
      background-color: #ffae0c;
    }
  </style>
</head>
<body>
  <div class="parent">Parent<br>
    <div class="sibling bordered">Sibling</div>
    <div class="sibling relative bordered">Relative Sibling
      <div class="child bordered">Child</div>
      <div class="child bordered">Child</div>
    </div>
    <div class="sibling bordered">Sibling</div>
  </div>
  <span class="light-olive">
    Sibling to the parent
  </span>
</body>
</html>

It'd be reasonable to assume that the .relative div will end up 50 pixels lower than the two other .siblings. However, that's not the case.

resulting site

midway

Let me point out another oddity of the site the way it is now.

why slightly higher

The difference between the heights isn't a fluke - but uncovering the reason why there is a difference will take some investigating.

quiz intro

This will be a two-part quiz. In both parts, you'll need to do some research and develop hypotheses.

Part 1

The image below shows how I want you to make this site look. You'll use developer tools to fix it. To do so, you only need to add one line of CSS on the .sibling class. My advice is to think back to what you just learned about text-align and vertical-align.

how it should look

This is how you probably thought the site should look.

outro

I want you to download the site and work on it on your own machine. When you've fixed the site, you'll get a code that you can copy and paste into the box at the bottom of this page.

Part 2

Making the site look right is only half of this challenge. The other half is uncovering the cause of the surprising layout. Most importantly, I want you to investigate the difference between the heights of the siblings. More on this after you finish part 1 by filling in the code below.

Instructions

Download this website.
Edit the site to make it look like the image above - you only need to add one CSS property to .sibling!
Copy the code from the Udacity Feedback extension into the box below.

QUESTION:

Fix the site!

When you finish, copy and paste the code that appears in the Feedback Extension, here.

ANSWER:

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer